<template>
  <div class="menu-list">
    <router-link id="btn" to="/index/add">
      <el-button type="primary">
        <i class="el-icon-circle-plus-outline"></i>添加
      </el-button>
    </router-link>
    <div class="table-box">
      <!-- data表格的数据 -->
      <!-- default-expand-all：默认展开全部 -->
      <!-- tree-props：树形数据 -->
      <!-- row-key：行数据的 Key，用来优化 Table 的渲染； -->
      <!-- <el-table :data="list" row-key="id" :tree-props="{ hasChildren: 'hasChildren', children: 'children' }"> -->
      <el-table
        :data="tableData"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- prop：就是每一列对应的数据的字段 -->
        <!-- label：就是每一列对应的标题 -->
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <el-table-column prop="title" label="标题" width="120">
        </el-table-column>
        <el-table-column label="类型">
          <!-- 想要在组件中显示插入的内容，就要通过插槽。插槽分为匿名插槽。具名插槽和作用域插槽 -->
          <!-- 作用域插槽的作用是传递变量，需要先写template，再添加slot-scope属性，获取数据 -->
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type == 1">目录</el-tag>
            <el-tag v-if="scope.row.type == 2">菜单</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="图标">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="url"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
            <el-tag v-if="scope.row.status == 2">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑按钮，需要传id -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="edit(scope.row.id)"
            ></el-button>
            <!-- 删除按钮，需要传id -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="del(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格中的数据
      tableData: [],
    };
  },
  // 获取tabledata，渲染页面
  created() {
    this.getTabledata();
  },
  methods: {
    // 获取table的数据
    getTabledata() {
      this.$http("/menulist?istree=1").then((res) => {
        this.tableData = res.data.list;
      });
    },
    edit(id) {
      // 去编辑页面。使用动态路由，因为每一个菜单要去的页面中的内容都一样
      // 这里还用到了嵌套路由，所以需要将父路由和子路由拼起来
      this.$router.push("/index/add/" + id);
    },
    del(id) {
      // 去删除
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 点击确定按钮，才能真的发请求
          this.$http.post("/menudelete", { id: id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
            // 获取最新的数据,方便更新页面
            this.getTabledata();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.table-box {
  padding-top: 40px;
}
</style>